import Paging from '@/components/Paging';
import RightButton from '@/components/RightButton';
import Layout from '@/Layout';
import { deleteArticle, queryArticles } from '@/services/creationCenter';
import {
  ArticleDetail,
  QueryArticleCondition,
} from '@/services/creationCenter/typing';
import {
  ExclamationCircleFilled,
  FunnelPlotFilled,
  SearchOutlined,
} from '@ant-design/icons';
import {
  Button,
  Card,
  DatePicker,
  Empty,
  Flex,
  Input,
  Modal,
  Spin,
  message,
} from 'antd';
import { useEffect, useState } from 'react';
import DraftItem from './components/DraftItem';
import styles from './index.module.scss';

const { confirm } = Modal;
const { RangePicker } = DatePicker;

let page = 1;
const DraftBox: React.FC = () => {
  const [draftList, setDraftList] = useState<ArticleDetail[]>([]);
  const [total, setTotal] = useState(0);
  const [keywords, setKeywords] = useState('');
  const [loading, setLoading] = useState(false);

  const pageChange = (pageNumber: number) => {
    page = pageNumber;
    queryDraftList();
  };

  async function queryDraftList() {
    const condition: QueryArticleCondition = {
      page,
      pageSize: 10,
      keywords,
      type: 0,
    };
    setLoading(true);
    const { data } = await queryArticles(condition);
    setDraftList(data.list);
    setTotal(data.total);
    setLoading(false);
  }

  useEffect(() => {
    queryDraftList();
  }, [keywords]);

  function clickDel(id: number) {
    confirm({
      title: '警告！！！',
      icon: <ExclamationCircleFilled />,
      content: '一旦删除将无法找回，确定删除吗？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      async onOk() {
        const res = await deleteArticle(id);
        message.success(res.msg);
        queryDraftList();
      },
    });
  }

  return (
    <>
      <Layout>
        <Card className={styles.searchBox}>
          <Flex align="center" justify="space-between">
            <Flex vertical>
              <Input
                className={styles.input}
                size="large"
                placeholder="输入关键字"
                prefix={<FunnelPlotFilled />}
                value={keywords}
                onChange={(e) => setKeywords(e.target.value)}
                onPressEnter={queryDraftList}
              />
              <RangePicker size="large" />
            </Flex>
            <Button
              type="primary"
              shape="circle"
              icon={<SearchOutlined />}
              onClick={queryDraftList}
            />
          </Flex>
        </Card>

        <div>
          {total === 0 ? (
            <div className={styles.empty}>
              <Empty />
            </div>
          ) : loading ? (
            <Flex align="center" justify="center" className={styles.container}>
              <Spin size="large" />
            </Flex>
          ) : (
            <>
              <Flex wrap className={styles.container}>
                {draftList.map((item) => (
                  <RightButton
                    articleId={item.article_id}
                    clickDel={clickDel}
                    key={item.article_id}
                  >
                    <div className={styles.item}>
                      <DraftItem detail={item} />
                    </div>
                  </RightButton>
                ))}
              </Flex>
              <Paging total={total} pageChange={pageChange} />
            </>
          )}
        </div>
      </Layout>
    </>
  );
};

export default DraftBox;
